<template>
  <div>
    <el-dialog
      title="选择坐标"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :destroy-on-close="true"
      :modal="false"
      append-to-body
    >
      <div class="mapSearch">
        <el-input
          placeholder="请输入你要查找的关键词"
          v-model="addressName"
          id="tishikuang"
          @change="onChange"
        ></el-input>
        <el-button type="primary" @click="determine">确定选址</el-button>
      </div>
      <div id="selectmap">
        <div id="panel"></div>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "7f6c5ef0e4334874107c067a4ca6702b" //在这里填写你的安全密钥
};
export default {
  data() {
    return {
      addressName: "",
      addressData: {
        // address: "",
        name: "",
        lng: 0,
        lat: 0
      },
      dialogVisible: false,
      map: null,
      autoOptions: {
        input: "tishikuang" //绑定的搜索关键字的input标签ID，用这个注册
      },
      auto: null,
      userInput: "", //绑定的搜索关键字的的内容
      placeSearch: null,
      isPanel: false,
      marker: {},
      form: { lng: 0, lat: 0 }

      // landmark: {} //选的位置信息
    };
  },
  // watch: {
  //   'addressData.name'() {

  //   }
  // },
  computed: {
    // infoWindowContent(){
    //   let info= `<div className="custom-infowindow input-card">' +
    //         <label style="color:grey">故宫博物院</label>'
    //         <div class="input-item">'
    //             <div class="input-item-prepend">'
    //                 <span class="input-item-text" >经纬度</span>'
    //             </div>
    //             <input id="lnglat" type="text" />
    //         </div>
    //         // 为 infowindow 添加自定义事件
    //         <input id="lnglat2container" type="button" class="btn" value="获取该位置经纬度" onclick="getLngLat()"/>' +
    //     </div>`
    //     return info
    // }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "842cedc6ee6cc125b1f242435c6fc0ac", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.Geolocation",
          "AMap.AutoComplete",
          "AMap.PlaceSearch",
          "AMap.Geocoder"
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map("selectmap", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [this.addressData.lng, this.addressData.lat] //初始化地图中心点位置 1.lng是经度 2.是lat纬度
          });
          //引入高德地图的空间绑定使用
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.Geolocation());
          this.auto = new AMap.AutoComplete(this.autoOptions);

          this.marker = new AMap.Marker({
            position: new AMap.LngLat(
              this.addressData.lng,
              this.addressData.lat
            ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: this.addressData.name
          });
          this.map.on("click", this.getLatLng);
          // 将创建的点标记添加到已有的地图实例：
          this.map.add(this.marker);

          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            // city: "宁海县", // 兴趣点城市
            citylimit: true, //是否强制限制在设置的城市内搜索
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          }); //构造地点查询类
          this.auto.on("select", this.select); //绑定查询事件
          this.placeSearch.on("markerClick", this.markerListClick); //绑定点击标点位置事件
          this.placeSearch.on("listElementClick", this.markerListClick); //绑定查询事件
        })
        .catch(e => {
          console.log(e);
        });
    },
    //poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有
    select(e) {
      this.placeSearch.setCity(e.poi.adcode); //依据城市ID搜索
      this.placeSearch.search(e.poi.name); //关键字查询查询
      this.map.setZoom(10, true);
      this.ComplexAddress(e.poi);
    },
    // lng是经度 2.是lat纬度
    markerListClick({ data }) {
      this.addressName = data.name;
      this.ComplexAddress(data);
    },
    ComplexAddress(value) {
      this.addressData = {
        // address: value.address,
        name: value.name,
        lng: value.location.lng,
        lat: value.location.lat
      };
    },
    open(value) {
      if (value.lng && value.lat) {
        this.addressName = value.name;
        this.addressData = value;
      }
      this.dialogVisible = true;
      this.initMap();
    },
    close() {
      this.dialogVisible = false;
      this.addressName=""
      this.addressData={
        // address: "",
        name: "",
        lng: 0,
        lat: 0
      }
    },
    // poi搜索以后 点击确认选址以后的操作
    determine() {
      if (!this.addressData.lat || !this.addressData.lat) {
        this.$message("请选择正确地址");
        return;
      }
      if (this.addressData.name) {
        console.log("位置：", this.addressData);
        this.$message({
          message: "地点：" + this.addressData.name,
          type: "success"
        });
        this.$emit("closeMap", this.addressData);
        return;
      }
      this.$message("请输入地址！");
    },
    onChange(value) {
      this.map.remove(this.marker);
    },
    //地图点击事件
    getLatLng(e) {
      //清除地图上的所有的覆盖物
      this.map.clearMap();
      this.addressData.lat = e.lnglat.getLat();
      this.addressData.lng = e.lnglat.getLng();
      let marker = new AMap.Marker({
        // icon: 'https://vdata.amap.com/icons/b18/1/2.png',
        position: [this.addressData.lng, this.addressData.lat]
      });
      this.map.add(marker);
      let geocoder;
      this.map.plugin(["AMap.Geocoder"], () => {
        geocoder = new AMap.Geocoder({
          city: "全国"
        });
        let lnglat = [this.addressData.lng, this.addressData.lat];
        geocoder.getAddress(lnglat, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            // this.addressData.address = "";
            this.addressData.name = result.regeocode.formattedAddress;
            this.addressName = result.regeocode.formattedAddress;
            console.log(this.addressData.name, "地址名");
          }
        });
      });
    }
  },
  destroyed() {
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
  }
};
</script>
 <style>
.amap-sug-result {
  z-index: 9999;
  visibility: visible;
}
</style>
<style lang="scss" scoped>
.select-map {
  z-index: 9999;
}
#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 0%;
  right: 0;
  width: 280px;
  z-index: 100;
}
#selectmap {
  z-index: 99;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 78vh;
  position: relative;
}

.mapSearch {
  display: flex;
  margin-bottom: 8px;

  .el-button {
    margin-left: 8px;
  }
}

#tishikuang {
  margin-bottom: 200px;
  display: block;
}
</style>